<template>
  <div class="demo-title">button/demo6</div>
  <div class="demo">
    <Button class="btn1" type="primary" :loading="true">Primary</Button>
    <Button class="btn2" type="info" :plain="true" :loading="true">Secondary</Button>
    <Button class="btn3" type="info" :plain="true" :loading="isLoading"  @click="onChange">Click me</Button>
  </div>
</template>

<script lang="ts" setup>
  import { ref } from 'vue'
  import Button from '@sscd-mobile/button'
  const isLoading = ref(false)
  const onChange = () => {
    isLoading.value = true
    setTimeout(() => {
      isLoading.value = false
    }, 3000)
  }
</script>

<style lang="less" scoped>
  .demo {
    margin-top: 10px;
    margin-bottom: 10px;
    width: 375px;
    height: 110px;
    display: flex;
    flex-direction: row;
    align-items: center;
    background-color: white;
    .btn1 {
      margin-top: 10px;
      margin-left: 10px;
      width: 80rpx;
      height: 80rpx;
    }
    .btn2 {
      margin-top: 10px;
      margin-left: 10px;
      width: 140rpx;
      height: 80rpx;
    }
    .btn3 {
      margin-top: 10px;
      margin-left: 10px;
      width: 140rpx;
      height: 80rpx;
    }
  }
</style>
